<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>show you magic</title>
    <style>
        body {
            font-family: Monospace;
            background-color: #f0f0f0;
            margin: 0px;
            overflow: hidden;
        }
    </style>

    <link rel="stylesheet" href="/static/css/bootstrap.css">
    <link rel="stylesheet" href="/static/css/bootstrap.min.css">
    <link rel="stylesheet" href="/static/css/bootstrap-theme.css">
    <link rel="stylesheet" href="/static/css/bootstrap-theme.min.css">

    <script src="/static/js/three.js"></script>
    <script src="/static/js/stats.min.js"></script>
    <script src="/static/js/OrbitControls.js"></script>
    <script src="/static/js/AnimationHandler.js"></script>
    <script src="/static/js/ColladaLoader.js"></script>
</head>
<body>

    <script type="text/javascript">
    var container;
    var scene,camera,renderer,controls;
    var submersible;
    var spotLight;

    var points = [];
    var splineObject;

    //***********总执行**********


    init();//对各属性值，初始化

    animate();//表现出来


    //**************************

    
    function init(){
        container = document.createElement( 'div' );//实际对象
        document.body.appendChild( container );

        var info = document.createElement( 'div' );
        info.style.position = 'absolute';
        info.style.top = '10px';
        info.style.width = '100%';
        info.style.textAlign = 'center';
        info.innerHTML = '<a href="http://threejs.org" target="_blank">three.js</a> my magic test';
        container.appendChild( info );
        
        //加上场景
        scene = new THREE.Scene();
        
        //加上视角
        createCamera();

        //建墙
        createwall();

        //建立海底
        createGround();

        //建立海面以及两边的海截面
        createSea();

        //建立渲染器
        createRender();
        
        //建立潜水器
        createSubmersible();

        //建立海面上的船
        createShip();
        
        //上帝说，要有光
        createLight();

        // 加上视角控制
        createControls();

        window.addEventListener( 'resize', onWindowResize, false );
                           
    }
    
    //建立视角摄像机
    function createCamera()
    {
        camera = new THREE.PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 1, 10000 );
        camera.position.x = -30;
        camera.position.y = 300;
        camera.position.z = 50;
        scene.add(camera);
    }

    //建立四周的海墙
    function createwall()
    {       
        var gridXY = new THREE.GridHelper(100, 9, 0x0000ff, 0x0000ff);
        gridXY.position.set( 0, 50,-100 );
        gridXY.rotation.x = Math.PI/2;
        scene.add(gridXY);
    
        var gridYZ = new THREE.GridHelper(100, 9, 0xff0000, 0xff0000);
        gridYZ.position.set( 100, 50, 0 );
        gridYZ.rotation.z = Math.PI/2;
        scene.add(gridYZ);

        var tubepoints1 = [
            new THREE.Vector3(-100, 150, -100),
            new THREE.Vector3(-100, 150, 100),
        ];

        var tubepoints2 = [
            new THREE.Vector3(-100, 150, 100),
            new THREE.Vector3(-100, -50, 100),
        ];

        var tubepoints3 = [
            new THREE.Vector3(-100, 150, 100),
            new THREE.Vector3(100, 150, 100),
        ];

        var tubepoints4 = [
            new THREE.Vector3(100, 150, 100),
            new THREE.Vector3(100, -50, 100),
        ];

        var tubepoints5 = [
            new THREE.Vector3(-100, -50, 100),
            new THREE.Vector3(100, -50, 100),
        ];

        var tubepoints6 = [
            new THREE.Vector3(-100, -50, 100),
            new THREE.Vector3(-100, -50, -100),
        ];

        var tubepoints7 = [
            new THREE.Vector3(-100, 150, -100),
            new THREE.Vector3(-100, -50, -100),
        ];

        var tubepoints8 = [
            new THREE.Vector3(-100, 150, -100),
            new THREE.Vector3(100, 150, -100),
        ];

        var tubepoints9 = [
            new THREE.Vector3(100, 150, -100),
            new THREE.Vector3(100, -50, -100),
        ];

        var tubepoints10 = [
            new THREE.Vector3(100, 150, -100),
            new THREE.Vector3(100, 150, 100),
        ];

        var tubepoints11 = [
            new THREE.Vector3(100, -50, -100),
            new THREE.Vector3(-100, -50, -100),
        ];

        var tubepoints12 = [
            new THREE.Vector3(100, -50, 100),
            new THREE.Vector3(100, -50, -100),
        ];

        addWallObject(tubepoints1);
        addWallObject(tubepoints2);
        addWallObject(tubepoints3);
        addWallObject(tubepoints4);
        addWallObject(tubepoints5);
        addWallObject(tubepoints6);
        addWallObject(tubepoints7);
        addWallObject(tubepoints8);
        addWallObject(tubepoints9);
        addWallObject(tubepoints10);
        addWallObject(tubepoints11);
        addWallObject(tubepoints12);

    }

    function addWallObject(tubepoints)
    {
        var curve = new THREE.SplineCurve3(tubepoints);
        var tubeGeometry = new THREE.TubeGeometry(curve, 1, 2, 8, false);
        var wallObject = createMesh(tubeGeometry,0x00ff00);
        scene.add(wallObject);
    }

    //建立海底
    function createGround()
    {
        var ground = new THREE.PlaneGeometry(200, 200, 50, 50);

        var groundMesh = THREE.SceneUtils.createMultiMaterialObject(ground,
                [new THREE.MeshBasicMaterial({wireframe: false, overdraw: true, color: 000000}),
                    new THREE.MeshBasicMaterial({color: 0xA39147, transparent: true, opacity: 0.5, side:THREE.DoubleSide}
                    )
                ]);
        groundMesh.rotation.x = -0.5 * Math.PI;
        groundMesh.position.set(0,-50, 0);
        scene.add(groundMesh);
    }
    
    //建立海面
    function createSea()
    {
        var Sea = new THREE.PlaneGeometry(200, 200, 50, 50);

        var SeaMesh = THREE.SceneUtils.createMultiMaterialObject(Sea,
                [new THREE.MeshBasicMaterial({wireframe: false, overdraw: true, color: 0x66ccff, transparent: true, 
                    opacity: 0.2}),
                    new THREE.MeshBasicMaterial({color: 0x66ccff,  transparent: true, opacity: 0.4, side:THREE.DoubleSide}
                    )
                ]);
        SeaMesh.rotation.x = -0.5 * Math.PI;
        SeaMesh.position.set(0, 80, 0);
        scene.add(SeaMesh);

        var water = new THREE.PlaneGeometry(200, 130, 50, 50);

        var waterMesh = THREE.SceneUtils.createMultiMaterialObject(water,
                [new THREE.MeshBasicMaterial({wireframe: false, overdraw: true, color: 0x66ccff, transparent: true, 
                    opacity: 0.2}),
                    new THREE.MeshBasicMaterial({color: 0x66ccff, transparent: true, opacity: 0.2, side:THREE.DoubleSide}
                    )
                ]);
        waterMesh.rotation.y = -0.5 * Math.PI;
        waterMesh.position.set(-100, 15, 0);
        scene.add(waterMesh);

        var waterMesh2 = THREE.SceneUtils.createMultiMaterialObject(water,
                [new THREE.MeshBasicMaterial({wireframe: false, overdraw: true, color: 0x66ccff, transparent: true, 
                    opacity: 0.2}),
                    new THREE.MeshBasicMaterial({color: 0x66ccff, transparent: true, opacity: 0.3, side:THREE.DoubleSide}
                    )
                ]);
        waterMesh2.rotation.y =  Math.PI;
        waterMesh2.position.set(0, 15, 100);
        scene.add(waterMesh2);

        var waterMesh3 = THREE.SceneUtils.createMultiMaterialObject(water,
                [new THREE.MeshBasicMaterial({wireframe: false, overdraw: true, color: 0x66ccff, transparent: true, 
                    opacity: 0.2}),
                    new THREE.MeshBasicMaterial({color: 0x66ccff, transparent: true, opacity: 0.3, side:THREE.DoubleSide}
                    )
                ]);
        waterMesh3.rotation.y =  Math.PI;
        waterMesh3.position.set(0, 15, -100);
        scene.add(waterMesh3);

        var waterMesh4 = THREE.SceneUtils.createMultiMaterialObject(water,
                [new THREE.MeshBasicMaterial({wireframe: false, overdraw: true, color: 0x66ccff, transparent: true, 
                    opacity: 0.2}),
                    new THREE.MeshBasicMaterial({color: 0x66ccff, transparent: true, opacity: 0.3, side:THREE.DoubleSide}
                    )
                ]);
        waterMesh4.rotation.y = -0.5 * Math.PI;
        waterMesh4.position.set(100, 15, 0);
        scene.add(waterMesh4);
    }
    
    //建立渲染器
    function createRender()
    {
        renderer = new THREE.WebGLRenderer( { antialias: true } );
        renderer.setClearColor( 0xf0f0ff );
        renderer.setPixelRatio( window.devicePixelRatio );
        renderer.setSize( window.innerWidth, window.innerHeight );
        renderer.shadowMap.enabled = true;
        container.appendChild(renderer.domElement);
    }
    
    //将潜水器建立起来
    function createSubmersible()
    {
        var loader = new THREE.ColladaLoader();
             loader.load('/static/models/submersible.dae', function(dae) {
                 dae.scene.traverse(function(child) {
                     if (child instanceof THREE.Mesh) {
                         child.material.side = THREE.DoubleSide;
                     }
                 });
             
                 submersible = dae.scene;
                 submersible.position.x = 0;
                 submersible.position.y = 77;
                 submersible.position.z = 0;
                 submersible.rotation.x = Math.PI/2;
                 submersible.rotation.y = Math.PI;
                 intoarray(submersible.position.x , submersible.position.y, submersible.position.z);
                 scene.add(dae.scene);
        });
    }

    //建立一只小船
    function createShip()
    {
        var loader = new THREE.ColladaLoader();
             loader.load('/static/models/ship.dae', function(dae) {
                 dae.scene.traverse(function(child) {
                     if (child instanceof THREE.Mesh) {
                         child.material.side = THREE.DoubleSide;
                     }
                 });
             
                 aship = dae.scene;
                 aship.position.x = 25;
                 aship.position.y = 77;
                 aship.position.z = 3;

                 aship.rotation.x = -Math.PI/2;
                 scene.add(dae.scene);
        });
    }
    
    //上帝说，要有光
    function createLight()
    {
        spotLight = new THREE.SpotLight(0xffffff);
        // spotLight.position.set(-40, 60, -10);
        spotLight.position.set(40, 160, 10);
        spotLight.castShadow = true;
        scene.add(spotLight);
    }
    
    //加上视角控制
    function createControls()
    {
        controls = new THREE.OrbitControls( camera, renderer.domElement );
        controls.maxPolarAngle = Math.PI * 2;
        controls.minDistance = 100;
        controls.maxDistance = 700;
    }

    //动起来
    function animate() {

        requestAnimationFrame( animate );
               
        render();
    }
    
    

    function render()
    {
        
        camera.lookAt(scene.position);    
        
        scene.add(splineObject);
        
        renderer.render( scene, camera );

        scene.remove(splineObject);
    }
    
    //将轨迹坐标写入数组
    function intoarray(x, y, z)
    {
        var point = new THREE.Vector3();
        point.set(x, y, z);
        points.push(point);//points乃是全局变量，意为表示轨迹各坐标的数组
    }
    
    //描画轨迹
    function drawTheOrbit()
    {
            var curve = new THREE.SplineCurve3(points);
            var tubeGeometry = new THREE.TubeGeometry(curve, 200, 1, 8, false);

            splineObject = createMesh(tubeGeometry, 0xff0000);

    }

    //决定轨迹的材质与颜色
    function createMesh(geom, neededcolor) 
    {
            //var meshMaterial = new THREE.MeshNormalMaterial();
            var meshMaterial = new THREE.MeshBasicMaterial({color: neededcolor, transparent: false, opacity: 0.2});

            var wireFrameMat = new THREE.MeshBasicMaterial();
            wireFrameMat.wireframe = true;

            // create a multimaterial
            var mesh = THREE.SceneUtils.createMultiMaterialObject(geom, [meshMaterial, wireFrameMat]);

            return mesh;
    }

    //可近可远
    function onWindowResize() 
    {

        camera.aspect = window.innerWidth / window.innerHeight;
        camera.updateProjectionMatrix();

        renderer.setSize( window.innerWidth, window.innerHeight );

    }

    //潜水器运动起来
    function moveTheSubmersible(CQx, CQy, CQz)
    {
        
        submersible.position.x += CQx;
        submersible.position.y += CQy;
        submersible.position.z += CQz;

        intoarray(submersible.position.x, submersible.position.y, submersible.position.z);
        drawTheOrbit();
    }

//************************胡搞分界线**********************************************************

    function imove(n)
    {
        switch(n)
        {
        case 0:
            moveTheSubmersible(-1, 1,-1);
            break;
        case 1:
            moveTheSubmersible( 0, 1,-1);
            break;
        case 2:
            moveTheSubmersible( 1, 1,-1);
            break;
        case 3:
            moveTheSubmersible(-1, 1, 0);
            break;
        case 4:
            moveTheSubmersible( 0, 1, 0);
            break;
        case 5:
            moveTheSubmersible( 1, 1, 0);
            break;
        case 6:
            moveTheSubmersible(-1, 1, 1);
            break;
        case 7:
            moveTheSubmersible( 0, 1, 1);
            break;
        case 8:
            moveTheSubmersible( 1, 1, 1);
            break;
        case 9:
            moveTheSubmersible(-1, 0,-1);
            break;
        case 10:
            moveTheSubmersible( 0, 0,-1);
            break;
        case 11:
            moveTheSubmersible( 1, 0,-1);
            break;
        case 12:
            moveTheSubmersible(-1, 0, 0);
            break;
        case 13:
            moveTheSubmersible( 0, 0, 0);
            break;
        case 14:
            moveTheSubmersible( 1, 0, 0);
            break;
        case 15:
            moveTheSubmersible(-1, 0, 1);
            break;
        case 16:
            moveTheSubmersible( 0, 0, 1);
            break;
        case 17:
            moveTheSubmersible( 1, 0, 1);
            break;
        case 18:
            moveTheSubmersible(-1,-1,-1);
            break;
        case 19:
            moveTheSubmersible( 0,-1,-1);
            break;
        case 20:
            moveTheSubmersible( 1,-1,-1);
            break;
        case 21:
            moveTheSubmersible(-1,-1, 0);
            break;
        case 22:
            moveTheSubmersible( 0,-1, 0);
            break;
        case 23:
            moveTheSubmersible( 1,-1, 0);
            break;
        case 24:
            moveTheSubmersible(-1,-1, 1);
            break;
        case 25:
            moveTheSubmersible( 0,-1, 1);
            break;
        case 26:
            moveTheSubmersible( 1,-1, 1);
            break;
        }
    }


    var line_1=new Array();



    {% for point in points %}
        line_1.push( {{ point }} );
    {% endfor %}





    function selectFrom(startNumber, endNumber) 
    {
        var choice = endNumber - startNumber + 1;
        return Math.floor(Math.random() * choice + startNumber)
    }

    function irandom_one_move()
    {
        var rand2 = selectFrom(0,26)
        imove(rand2);
    }




    var counter=0;
    var time1;

    function irandom_some_move()
    {
        var rand2 = selectFrom(0,26)
        imove(rand2);
        counter += 1;
        time1=setTimeout("irandom_some_move()",1000)
    }
    
    function stop_irandom_some_move()
    {
        counter=0;
        clearTimeout(time1);
    }

    function firstline()
    {
        imove(line_1[counter]);
        counter += 1;
        time1=setTimeout("firstline()",500)
        if(counter == line_1.length)
        {
            clearTimeout(time1);
        }
    }



    // function firstline()
    // {
    //     for(var i=0;i<line_1.length;i++)
    //         {
    //             // c = i;
    //             console.log(line_1[c]);

    //             setTimeout("imove(line_1[c++])",1000*i);
    //         }
    // }



</script>

    <div style="position:absolute;left:25px;top:25px;">

        <button type="button" class="btn btn-danger" onclick="imove(0)">↖</button>
        <button type="button" class="btn btn-danger" onclick="imove(1)">↑</button>
        <button type="button" class="btn btn-danger" onclick="imove(2)">↗</button>
        <br>
        <button type="button" class="btn btn-danger" onclick="imove(3)">←</button>
        <button type="button" class="btn btn-danger" onclick="imove(4)">上</button>
        <button type="button" class="btn btn-danger" onclick="imove(5)">→</button>
        <br>
        <button type="button" class="btn btn-danger" onclick="imove(6)">↙</button>
        <button type="button" class="btn btn-danger" onclick="imove(7)">↓</button>
        <button type="button" class="btn btn-danger" onclick="imove(8)">↘</button>
        <br>

        <button type="button" class="btn btn-warning" onclick="imove(9)">↖</button>
        <button type="button" class="btn btn-warning" onclick="imove(10)">↑</button>
        <button type="button" class="btn btn-warning" onclick="imove(11)">↗</button>
        <br>
        <button type="button" class="btn btn-warning" onclick="imove(12)">←</button>
        <button type="button" class="btn "            onclick="imove(13)">中</button>
        <button type="button" class="btn btn-warning" onclick="imove(14)">→</button>
        <br>
        <button type="button" class="btn btn-warning" onclick="imove(15)">↙</button>
        <button type="button" class="btn btn-warning" onclick="imove(16)">↓</button>
        <button type="button" class="btn btn-warning" onclick="imove(17)">↘</button>
        <br>

        <button type="button" class="btn btn-success" onclick="imove(18)">↖</button>
        <button type="button" class="btn btn-success" onclick="imove(19)">↑</button>
        <button type="button" class="btn btn-success" onclick="imove(20)">↗</button>
        <br>
        <button type="button" class="btn btn-success" onclick="imove(21)">←</button>
        <button type="button" class="btn btn-success" onclick="imove(22)">下</button>
        <button type="button" class="btn btn-success" onclick="imove(23)">→</button>
        <br>
        <button type="button" class="btn btn-success" onclick="imove(24)">↙</button>
        <button type="button" class="btn btn-success" onclick="imove(25)">↓</button>
        <button type="button" class="btn btn-success" onclick="imove(26)">↘</button>
        <br>
        <button type="button" class="btn btn-info" onclick="irandom_one_move()">随机移动一次</button>
        <br>
        <button type="button" class="btn btn-info" onclick="irandom_some_move()">开始随机</button>
        <button type="button" class="btn btn-info" onclick="stop_irandom_some_move()">停止随机</button>
        <br>
        <button type="button" class="btn btn-info" onclick="firstline()">第一条轨迹</button>

    </div>

</body>
</html>